<template>
	<div class="section-eight" :title="page_title">
		<h2 class="common_title">如何免费体验VIPKID试听体验<i></i></h2>
		<ul class="width-visual clearfix text-center">
			<li class="col_4">
				<div class="icon-box"><img class="num" src="">
					<div class="icon"><img src="" alt="注册免费领取"></div>
				</div>
				<div class="detail">
					<h5>注册免费领取<br>价值288元试听体验</h5>
					<p class="detail font14">注册后我们会尽快与您联系</p>
				</div>
			</li>
			<li class="col_4">
				<div class="icon-box"><img class="num" src="">
					<div class="icon"><img src="" alt="为您安排预约"></div>
				</div>
				<div class="detail">
					<h5>为您安排预约</h5>
					<p class="detail font14">您的专属课程顾问会及时与您联络，为您的<br>孩子安排测评及1对1北美外教试听体验</p>
				</div>
			</li>
			<li class="col_4">
				<div class="icon-box"><img class="num" src="">
					<div class="icon"><img src="" alt="进入在线教室开始上课"></div>
				</div>
				<div class="detail">
					<h5>进入在线教室开始上课</h5>
					<p class="detail font14">下载应用，开始1对1上课</p>
				</div>
			</li>
		</ul>
		<div class="register">
			<a href="#/step">
				<div class="obtain-btn margin-auto" id="freeVipkidLookDeatilBtn">查看详情</div>
			</a>
		</div>
		<el-dialog title="编辑文本" :visible.sync="dialogVisible" width="20%" custom-class="mydialog">
			<el-input type="textarea" v-model="rawhtml" size="small" width="150px;"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editOK">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { Mixins } from "@/common/mixins";
	export default {
		mixins: [Mixins],
		props: ["pcomponent"],
		data() {
			return {
				component: this.pcomponent,
				dialogVisible: false,
				rawhtml: "",
				currentProp: "",
				page_title: this.$vnode.key,
			};
		},
		created() {
			console.log(this.$vnode.key + "子组件接收父组件值：", this.component);
		},
		methods: {},
	};
</script>
<style lang="less">
.mydialog {
	opacity: 70%;
}
</style>